<template>
	<view class="all">
		<uni-nav-bar :fixed="true" :statusBar="true">
			<template slot="left">
				<view class="addres" @tap="toCity">{{cityIndex}}
					<image src="../../static/first/down.png"></image>
				</view>
			</template>
			<view class="jiangqie-btn-search" @tap="toSearch()">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#cccccc" />
				<text>搜索服务项目</text>
			</view>
		</uni-nav-bar>
		<!-- 轮播图 -->
		<ls-swiper :list="bannerList" imgKey="imgUrl" :loop="true" :dots='true' :autoplay='true' height='150' />
		<!-- 宫格 -->
		<view class="box">
			<view class="littleBox" v-for="(item,index) in list" :key="index" @click="toTypeDetail(item.name)">
				<image :src="item.icon" mode="aspectFit"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		<!-- 热门服务 -->
		<view class="hotServe">
			<view class="title">
				<view class="left">
					<image src="../../static/first/zs.png"></image>
					<view class="hot">热门服务</view>
				</view>
				<!-- 更多 -->
				<view class="more">
					<view @tap="toMore(1)">更多</view>
					<image src="../../static/first/right.png"></image>
				</view>
			</view>
			<view class="content">
				<view class="serveProject" v-for="(item,index) in hotServices" :key="index"
					@click="toServieDetail(item)">
					<image class="tree" :src="item.coverImg[0]"></image>
					<view style="font-size: 34rpx;">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 最新活动 -->
		<view class="hotServe">
			<view class="title">
				<view class="left">
					<image src="../../static/first/zs.png"></image>
					<view class="hot">最新活动</view>
				</view>
				<!-- 更多 -->
				<view class="more">
					<view @tap="toMore(2)">更多</view>
					<image src="../../static/first/right.png"></image>
				</view>
			</view>
			<view class="content">
				<view class="serveProject" v-for="(item,index) in newActivityList" :key="index"
					@click="toServieDetail(item)">
					<image class="tree" :src="item.coverImg[0]"></image>
					<view style="font-size: 34rpx;">{{item.title}}</view>
				</view>
			</view>
		</view>

		<!-- 行业动态 -->
		<view class="hotServe">
			<view class="title">
				<view class="left">
					<image src="../../static/first/zs.png"></image>
					<view class="hot">行业动态</view>
				</view>
			</view>
			<view class="dynamic" v-for="(n,index) in industryDetailList" :key="index" @click="toDetail(n)">
				<image :src="n.imgUrl" class="dynamic_left"></image>
				<view class="dynamic_right">
					<view>{{n.titles}}</view>
					<view class="date">{{n.releaseTime}}</view>
				</view>
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	import utils from '../../common/utils.js'
	import LsSwiper from '../../components/ls-swiper/index.vue'
	export default {
		components: {
			LsSwiper
		},
		data() {
			return {
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: '5%',
				statusTop: '40rpx',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				background: ['color1', 'color2', 'color3'],
				list: [],
				bannerList: [], //轮播图列表
				hotServices: [], //热门服务列表
				newActivityList: [], //最新活动
				industryDetailList: [], //行业动态
				cityIndex: '',
				loadMoreText: '加载中',
				showLoadMore: false,
				page: 0
			}
		},
		onReachBottom() {
			this.showLoadMore = true;
			setTimeout(() => {
				this.getIndustryDetailList();
			}, 300);
		},
		onLoad() {
			this.getTypes()
			this.getBannerList()
			this.getHotServices()
			this.getNewActivityList()
			this.getIndustryDetailList()
			this.getCityList()
		},
		onShow() {
			if (getApp().globalData.city != '') {
				this.cityIndex = getApp().globalData.city
			}
			if (getApp().globalData.timeUp) {
				this.getHotServices()
				this.getNewActivityList()
				getApp().globalData.timeUp = false
			}
		},
		methods: {
			//获取城市列表
			getCityList() {
				uni.request({
					url: this.$serverUrl + '../dictDetail/map',
					data: {
						"dictName": 'company_city'
					},
					success: (res) => {
						this.cityIndex = res.data.company_city[0].value
						getApp().globalData.city = this.cityIndex
					}
				})
			},
			//获取分类
			getTypes() {
				uni.request({
					url: this.$serverUrl + 'ftServiceType',
					data: {
						"page": 0,
						"size": 50
					},
					success: (res) => {
						this.list = res.data.content
					}
				})
			},
			//分类跳转
			toTypeDetail(name) {
				uni.navigateTo({
					url: '/pages/home/typeDetail?type=' + name
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/home/search"
				})
			},
			//跳转热门服务
			toMore(type) {
				uni.navigateTo({
					url: "/pages/home/hotService?type=" + type
				})
			},
			// 定位城市
			toCity() {
				uni.navigateTo({
					url: "/pages/home/city"
				})
			},
			//提示
			showToast(title) {
				uni.showToast({
					title: title,
					icon: "none"
				})
			},
			//获取轮播图
			getBannerList() {
				uni.request({
					url: this.$serverUrl + 'ftBanner',
					success: (res) => {
						this.bannerList = res.data.content
					},
					fail: (e) => {
						this.showToast('轮播图获取失败')
					}
				})
			},
			//获取热门服务
			getHotServices() {
				uni.request({
					url: this.$serverUrl + 'ftService/getPutShelfServicesByType',
					data: {
						"pageNo": 1,
						"pageSize": 3,
						"popularFlag": 1
					},
					method: 'POST',
					success: (res) => {
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].title = res.data[i].title.substring(0, 6)
						}
						this.hotServices = res.data
					},
					fail: (e) => {
						this.showToast('热门服务获取失败')
					}
				})
			},
			//最新活动
			getNewActivityList() {
				uni.request({
					url: this.$serverUrl + 'ftService/getPutShelfServicesByType',
					data: {
						"pageNo": 1,
						"pageSize": 3,
						"activityFlag": 1
					},
					method: 'POST',
					success: (res) => {
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].title = res.data[i].title.substring(0, 6)
						}
						this.newActivityList = res.data
					},
					fail: (e) => {
						this.showToast('最新活动获取失败')
					}
				})
			},
			//行业动态
			getIndustryDetailList() {
				uni.request({
					url: this.$serverUrl + 'ftIndustryDetails',
					data: {
						"page": this.page,
						"size": 10
					},
					method: 'GET',
					success: (res) => {
						let data = res.data.content
						if (data.length == 0) {
							this.loadMoreText = '没有更多了'
						} else {
							for (let i = 0; i < data.length; i++) {
								data[i].titles = data[i].title.substring(0, 20)
							}
							this.page += 1
							this.industryDetailList = this.industryDetailList.concat(data)
						}
					},
					fail: (e) => {
						this.showToast('行业动态获取失败')
					}
				})
			},
			//服务详情跳转页面
			toServiceDetailPage(item) {
				uni.request({
					url: this.$serverUrl + 'ftService/addServiceBrowseNumber/' + item.id,
					success: (res) => {

					}
				})
				uni.navigateTo({
					url: '/pages/serve/serviceDetail?op=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//跳转服务详情
			toServieDetail(item) {
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				if (userInfo != '') {
					this.toServiceDetailPage(item)
				} else {
					uni.getUserProfile({
						desc: 'wexin',
						success: (e) => {
							utils.loginRequest(e.userInfo).then((res) => {
								if (res.success) {
									if (uni.getStorageSync('userInfo') != '') {
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										})
										this.toServiceDetailPage(item)
									}
								}
							})
						}
					})
				}
			},
			//行业详情跳转页面
			toPage(item) {
				uni.request({
					url: this.$serverUrl + 'ftIndustryDetails/addBrowseNumber',
					data: {
						"id": item.id
					},
					success: (res) => {

					}
				})
				uni.navigateTo({
					url: '/pages/home/detail?op=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//跳转行业详情
			toDetail(item) {
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				if (userInfo != '') {
					this.toPage(item)
				} else {
					uni.getUserProfile({
						desc: 'wexin',
						success: (e) => {
							utils.loginRequest(e.userInfo).then((res) => {
								if (res.success) {
									if (uni.getStorageSync('userInfo') != '') {
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										})
										this.toPage(item)
									}
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	.uni-loadmore {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding-bottom: 30rpx;
	}

	/* 搜索框 */
	.jiangqie-btn-search {
		display: flex;
		align-items: center;
		width: 80%;
		height: 32px;
		padding-left: 20rpx;
		background: #F5F5F5;
		border-radius: 16px;
		color: #CCCCCC;
		font-size: 24rpx;
	}

	.addres {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		font-size: 24upx;
	}

	.addres image {
		width: 20upx;
		height: 20upx;
	}

	.mp-header {
		width: 70%;
		display: flex;
		align-items: center;
		position: fixed;
		top: 5%;
	}

	.input-box {
		margin-left: 20upx;
		width: 60%;
		height: 60upx;
		background-color: #f5f5f5;
		border-radius: 30upx;
		line-height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search {
		display: flex;
		align-items: center;
	}

	.search image {
		margin-left: 10upx;
		height: 30upx;
		width: 30upx;
	}

	.input-box input {
		margin-left: 20upx;
		font-size: 28upx;
	}

	/* 宫格 */
	.box {

		display: flex;
		flex-wrap: wrap;
		margin: 40upx 10upx;
		align-items: center;
		justify-content: center;
	}

	.littleBox {
		width: 18%;
		/* width: 25upx; */
		font-size: 26upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 20upx 20upx;
	}

	.littleBox image {
		width: 88upx;
		height: 88upx;
	}

	/* 热门服务 */
	.hotServe {
		margin: 88upx 36upx;
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: flex-end;
	}

	.left image {
		width: 22upx;
		height: 26upx;
	}

	.hot {
		margin-left: 26upx;
		font-weight: bold;
		letter-spacing: 3upx;
	}

	.more {
		display: flex;
		align-items: center;
		color: #999999;
	}

	.more image {
		width: 28upx;
		height: 28upx;
		margin-left: 10upx;
	}

	.serveProject {
		width: 230upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.tree {
		width: 210upx;
		height: 210upx;
		border-radius: 12upx;
		margin-bottom: 10upx;

	}

	.content {
		display: flex;
		justify-content: space-between;
		margin-top: 36upx;
	}

	.dynamic {

		display: flex;
		height: 176upx;
		margin-top: 40upx;
	}

	.dynamic_left {
		width: 176upx;
		height: 176upx;
	}

	.dynamic_right {
		margin-left: 24upx;
		letter-spacing: 3upx;
		width: 60%;
	}

	.date {
		color: #999999;
		font-size: 24upx;
		margin-top: 60upx;
	}

	.date_last {
		color: #999999;
		font-size: 24upx;
		margin-top: 40upx;
	}
</style>
